{% load i18n %}
{% load compress %}
{% load static %}
{% load thumbnail %}

<div class="avatar-form form-group row">
    <label class="col-md-3 col-form-label">{% translate "Profile picture" %}</label>
    <div class="avatar-form-fields col-md-9">
        <div class="d-flex align-items-start hide-label">
            <div>
                <div class="avatar-upload hide-label">
                    {{ form.avatar.as_field_group }}
                </div>
                {{ form.get_gravatar.as_field_group }}
            </div>
            <div class="form-image-preview {% if not user.avatar and not user.get_gravatar %}d-none{% endif %}">
                <a href="{% if user.avatar %}{{ user.avatar|thumbnail:"default" }}{% endif %}" data-lightbox="{% if user.avatar %}{{ user.avatar.url }}{% endif %}">
                    <img loading="lazy"
                         class="avatar"
                         data-gravatar="{{ user.gravatar_parameter }}"
                         data-avatar="{% if user.avatar %}{{ user.avatar.url }}{% endif %}"
                         alt="{% translate "Your avatar" %}"
                         {% if user.avatar %}src="{{ user.avatar.url }}"{% endif %} />
                </a>
            </div>
        </div>
    </div>
</div>

{% compress css %}
    <link rel="stylesheet" href="{% static "common/css/avatar.css" %}">
{% endcompress %}
{% compress js %}
    <script defer src="{% static "cfp/js/profile.js" %}"></script>
{% endcompress %}
